<template>
  <div class="all">
    <el-container>
      <div class="main1">
        <el-main >
        <el-card class="box-card" shadow="always">
          <div slot="header" class="clearfix">
            <div class="con">
              <span class="title"><h3>{{detailInfo.title}}</h3></span>
              <!-- <h4>查看图谱</h4> -->
              <!-- <el-button type="primary" plain>主要按钮</el-button> -->
              <div class="btn_b">
                <span class="num">{{detailInfo.application_num}}</span>
                <span class="status">有效</span>
              </div>
              
            </div>
            <div class="slider">
            <div class="graph"> 
              <!-- <router-link :to="'/patent/detail/' + scope.row.application_num"> -->
              <router-link :to="'/form/index/'+detailInfo.application_num">
                <el-button type="primary" plain>查看图谱</el-button>
              </router-link>
            </div>
            <div class="collect">
              <el-switch
                v-model="collectState"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="收藏"
                inactive-text="未收藏"
                @change="changeCollect(collectState,id.id)">
              </el-switch>
            </div>
            </div>
          </div>
          <div class="body">
            <span class="item appli">申请人：<span class="key" @click="getDetail(detailInfo.applicant)">{{detailInfo.applicant}}</span></span>
            <span class="item">专利类型：<span class="key">{{detailInfo.patent_type}}</span></span>
            <span class="item">发明人：<span class="key">{{detailInfo.inventor}}</span></span>
            <!-- <span class="item">专利评分：<span class="key">{{detailInfo.value_score}}</span></span>
            <span class="item">专利被引数:<span class="key">{{detailInfo.cited_num}}</span></span> -->
            <span class="item">代理机构:<span class="key">{{detailInfo.agency}}</span></span>

            <!-- <div class="text item">
              申请人：{{detailInfo.applicant}}
            </div>
            <div class="text item">
              专利类型：{{detailInfo.patent_type}}
            </div>
            <div class="text item">
              专利评分：{{detailInfo.value_score}}
            </div>
            <div class="text item">
              专利被引数:{{detailInfo.cited_num}}
            </div> -->
          </div>
          
        </el-card>
      </el-main>  
      </div>
      <el-main>
        <el-tabs type="border-card" >
          <el-tab-pane label="专利概览">
            <!-- 专利概览 -->
            <table class="dataintable">
                <tr>
                  <th>发明名称</th>
                  <td colspan="3" class="title">{{detailInfo.title}}</td>
                </tr>
                <tr>
                  <th>申请号</th>
                  <td>{{detailInfo.application_num}}</td>
                  <th>专利类型</th>
                  <td>{{detailInfo.patent_type}}</td>
                  
                </tr>
                <tr>
                  <th>发明人</th>
                  <td>{{detailInfo.inventor}}</td>
                  <th>目前状态</th>
                  <td>{{detailInfo.current_state_of_law}}</td>
                  
                </tr>
                <tr>
                  <th>专利评分</th>
                  <td>{{detailInfo.value_score}}</td>
                  <th>专利被引数</th>
                  <td>{{detailInfo.cited_num}}</td>
                  
                </tr>
                <tr>
                  <th>代理机构</th>
                  <td>{{detailInfo.agency}}</td>
                  <th>代理人</th>
                  <td>{{detailInfo.agent}}</td>
                </tr>
                <tr>
                  <th>摘要</th>
                  <td colspan="3">{{detailInfo.digest}}</td>
                </tr>
                <tr>
                  <th>关键词</th>
                  <td colspan="3">{{detailInfo.patentWords}}</td>
                </tr>

                <!-- <tr>
                  <th colspan="5">分页代码</th>
                </tr> -->
                </table>
          </el-tab-pane>
          <el-tab-pane label="文本信息">
            <table class="dataintable">
              <tr>
                <th>摘要(原)</th>
                <td>{{detailInfo.digest}}</td>
              </tr>
              <tr>
                <th>摘要(译)</th>
                <td>{{detailInfo.digest_en}}</td>
              </tr>
              <tr>
                <th>关键词</th>
                <td>{{detailInfo.patentWords}}</td>
              </tr>
            </table>

           
            <!-- <div class="info item">
              摘要(原)：{{detailInfo.digest}}
            </div>
            <div class="info item">
              摘要(译)：{{detailInfo.digest_en}}
            </div>
            <div class="info item">
              关键词：{{detailInfo.patentWords}}
            </div> -->
          </el-tab-pane>
          <el-tab-pane label="引用关系">
            <table class="dataintable">
              <tr>
                <th>引用量</th>
                <td>{{detailInfo.citeNum}}</td>
              </tr>
              <tr>
                <th>被引量</th>
                <td>{{detailInfo.cited_num}}</td>
              </tr>
              <tr>
                <th>同族引用量</th>
                <td>{{detailInfo.familyCiteNum}}</td>
              </tr>
              <tr>
                <th>同族被引用量</th>
                <td>{{detailInfo.familyCitedNum}}</td>
              </tr>
            </table>
          </el-tab-pane>
          <el-tab-pane label="法律状态">
            <table class="dataintable">
              <tr>
                <th>目前法律状态</th>
                <td>{{detailInfo.current_state_of_law}}</td>
              </tr>
              <tr>
                <th>法律状态</th>
                <td>{{detailInfo.state_Of_Law}}</td>
              </tr>
              <!-- <tr>
                <th>法律状态一</th>
                <td>{{detailInfo.state_Of_Law.split("\r\n",3)}}</td>
              </tr>
              <tr>
                <th>法律状态二</th>
                <td>{{detailInfo.state_Of_Law.split("\r\n",3)}}</td>
              </tr>
              <tr>
                <th>法律状态三</th>
                <td>{{detailInfo.state_Of_Law.split("\r\n",3)}}</td>
              </tr> -->
              <!-- <tr>
                <th>同族引用量</th>
                <td>{{detailInfo.familyCiteNum}}</td>
              </tr>
              <tr>
                <th>同族被引用量</th>
                <td>{{detailInfo.familyCitedNum}}</td>
              </tr> -->
            </table>
          
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import patent from "@/api/chapter/patent";
import collect from '@/api/chapter/collect'

export default {
  data() {
    //定义变量及初始值
    return {
      detailInfo: null,
      id: {},
      collectState:false,
    };
  },
  created() {
    //页面渲染之前执行，调用methods定义的方法
    //页面渲染钱调用getDetailInfo
    this.init();
    
  },
  methods: {
    getDetail(id){
      this.$router.push(`/company/detail/${id}`)
    },
    init() {
      //步骤：1.获取路由路径中的id值
      this.id.id = this.$route.params.id;
      console.log(this.$route.params.id);
      console.log(this.id)
      console.log(this.id.id);
      this.getDetailInfo(this.id);
      this.getPatentCollectState(this.id.id);
    },
    //根据api里封装的patentById来获取专利详情数据
    getDetailInfo(id) {
      console.log("getDetailInfo方法");
      console.log(id);
      patent
        .patentById(id)
        .then((res) => {
          this.detailInfo = res.data.data;
          console.log(this.detailInfo);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取该专利用户是否收藏
    getPatentCollectState(id){
      collect.getPatentCollectState(id).then((res) =>{
        console.log(res.data.state);
        if(res.data.state == true){
          console.log("res.data.state = true")
          this.collectState = true;
        }
        if(res.data.state  == false){
          this.collectState = false;
        }
      })
    },
    //更改收藏状态
    changeCollect(collectState,patentNum){                                                                                        
      //绑定的是更改之后的状态
      console.log(collectState)
      if(collectState == true){//由未收藏转换为收藏，调用收藏函数
        collect.collectPatent(patentNum).then((res) =>{
          if(res.data.state == true){
            this.collectState = true
            this.$message({
              message:'收藏成功!',
              type:'success'
            })
          }
        })
      }

      if(collectState == false){
        collect.deleteCollectPatent(patentNum).then((res) =>{
          if(res.data.state == "cancel"){
            this.collectState = false
            this.$message({
              message:'取消收藏成功!',
            })
          }
        })
      }
    }
  },
};
</script>


<style>

.el-container {
  display: block;
}
.title{
  font-size: 20px;
}

.info{
  font-size: 16px;
}

.text {
  font-size: 20px;

}
.btn_b {
  margin-top: 20px;
}
.item {
  margin-bottom: 18px;
}

/* .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
} */
.clearfix {
  display: block;
}
.clearfix .con {
  float: left;
}
.clearfix .slider {
  float: right;
  text-align: center;
  margin-top: 30px;
  /* padding-top: -200px; */
  /* height: 20px; */
  /* line-height: 200px; */
  /* line-height: ; */
}
.clearfix .collect{
  float: right;
  text-align: center;
  margin-top: 30px;
}

.box-card {
  width: 100%;
}

.box-card .clearfix .num {
  background-color: rgb(238, 234, 15);
  padding: 10px;
  border-radius: 8px;
  box-sizing: content-box;
}

.box-card .clearfix .status {
  color: green;
  margin-left: 5px;
}

.box-card .body .key {
  color: rgb(48, 24, 155);
}
/* .box-card .body .appli .key {

} */
.box-card .body .appli .key:hover {
  cursor: pointer;
  color: blue;
}

.box-card .body .item {
  margin-right: 20px;
}

/* table样式 */
table.dataintable {
   border: 1px solid #888888;
   border-collapse: collapse;
   font-family: Arial,Helvetica,sans-serif;
   margin-top: 10px;
   width: 100%;
   text-align: center;
}

table.dataintable th {
   background-color: #CCCCCC;
   border: 1px solid #888888;
   padding: 5px 15px 5px 5px;
   text-align: center;
   /* writing-mode: horizontal-tb; */
   width: 150px;
   height: 80px;
   /* vertical-align: baseline; */
}
table.dataintable td {
   background-color: #EFEFEF;
   border: 1px solid #AAAAAA;
   padding: 5px 15px 5px 5px;
   text-align: center;
   /* vertical-align: text-top; */
}
table.dataintable td:hover {
  background-color: #7e9ba3;
}

.border-card {
  /* float: left; */
  width: 800px;
  margin-left: -5px;
}
</style>